<template>
  <div class="setting-box" id="three-id-001">
    <div class="message-box">
      <i class="doorIcon">&#xe640;</i>
      <span>
        <span class="message-content"
          >为此展览创建一套标签体系，展品标签用于标注展品上出现的各种元素，例如人物、动物、植物、纹理等等，经过标签标注的展品，可以通过标签进行筛选。</span
        >
        <span class="message-un" @click="visible = true">查看示例</span>
      </span>
    </div>
    <t-image-viewer
      v-model:visible="visible"
      :images="['https://static-1316349889.cos.ap-shanghai.myqcloud.com/door/demonstrateImg.png']"
    >
    </t-image-viewer>
    <div class="tree-parent">
      <t-tree
        ref="tree"
        :data="items"
        v-model:actived="actived"
        activable
        hover
        transition
        :expandMutex="true"
        :activeMultiple="false"
        :expandAll="false"
        :expandOnClickNode="true"
        :expandParent="true"
        :keys="threeKeys"
        @active="onActive"
      >
        <!-- v-if="node.data.children.length > 0" -->
        <template #icon="{ node }"><i class="doorIcon" v-if="node.data.children.length > 0">&#xe664;</i> </template>
        <template #operations="{ node }">
          <div class="editMenu">
            <t-popconfirm @cancel="cancel" @confirm="confirm" v-if="node.data.level < 3">
              <template #content>
                <div class="input-box">
                  <t-input :maxlength="20" v-model="parmas.name" @enter="confirm"></t-input>
                </div>
              </template>

              <i class="doorIcon" @click.stop="append(node)">&#xe662;</i>
            </t-popconfirm>
            <!-- <t-popup
              attach="#three-id-001"
              overlayClassName="popup"
              class="placement top"
              content="添加子标签"
              placement="top"
              showArrow
              destroyOnClose 
            >
            <template>

            </template>
              <i class="doorIcon" @click="append(node)">&#xe662;</i>
            </t-popup> -->
            <t-popconfirm @cancel="cancel" @confirm="confirm">
              <template #content>
                <div class="input-box">
                  <t-input :maxlength="20" v-model="parmas.name" @enter="confirm"></t-input>
                </div>
              </template>

              <div @click="editId(node)">
                <t-popup
                  v-if="node.data.id !== 0"
                  attach="#three-id-001"
                  overlayClassName="popup"
                  class="placement top"
                  content="编辑标签"
                  placement="top"
                  showArrow
                  destroyOnClose
                >
                  <i class="doorIcon">&#xe65d;</i>
                </t-popup>
              </div>
            </t-popconfirm>

            <t-popup
              v-if="node.data.id !== 0 && node.data.children.length == 0"
              attach="#three-id-001"
              overlayClassName="popup"
              class="placement top"
              content="删除标签"
              placement="top"
              showArrow
              destroyOnClose
            >
              <i class="doorIcon" @click="remove(node)">&#xe634;</i>
            </t-popup>
          </div>
          <!-- <t-button :disabled="disableLabel" size="small" variant="base" @click="append(node)"> 添加子节点 </t-button>
          <t-button  size="small" variant="outline" @click="insertAfter(node)">
            后插节点
          </t-button>
          <t-button :disabled="disableLabel" size="small" variant="base" theme="danger" @click="remove(node)">
            删除
          </t-button> -->
        </template>
      </t-tree>
    </div>

    <messageModel
      submitText="删除"
      title="提示"
      :visible="visible1"
      problem="确定删除此标签？"
      message="删除后无法找回"
      @closeClick="closeClick"
      @submitClick="submitClick"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { tagList, tagSave, delTag } from '@/api/tag/tag';
import moveDialog from './moveDialog.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { SettingType } from '@/api/model/project';
import messageModel from '@/components/messageModel/index.vue';
import { settings, addsettings, transfer, projectDisable } from '@/api/project/project';
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { overview, projectRole } from '@/api/project/project';
import { useProjectStore, useUserStore } from '@/store';

const store = useProjectStore();
const route = useRoute();
const index = ref(2);
const DelId = ref(0);
const expandIds = ref([]);
const visible = ref(false);
const tree = ref(null);
const userstore = useUserStore();
const router = useRouter();
const props = defineProps({
  role: {
    type: Number,
  },
});
const threeKeys = {
  value: 'id',
  label: 'name',
  children: 'children',
};
const parmas = reactive({
  id: 0,
  name: '',
  projectId: 0,
  parentId: 0,
  sort: 0,
  showpieceId: 0,
});
parmas.projectId = Number(route.query.projectId);
const actived = ref([0]);

const items = ref([]);
const init = async () => {
  let { data } = await tagList(localStorage.getItem('projectId'));
  items.value = [
    {
      parentId: 0,
      name: '展品标签',
      id: 0,
      level: 0,
      children: data,
    },
  ];
  // items.value[0].children = data;
  // console.log(items.value[0].children);
};
init();
const editId = (node) => {
  parmas.id = node.data.id;
  parmas.parentId = node.data.parentId;
  parmas.name = node.data.name;
};
const append = (node) => {
  //新增子节点
  console.log(node);
  parmas.parentId = node.data.id;
  parmas.name = '';
  parmas.id = 0;
};
const addTag = () => {
  if (!parmas.name) {
    MessagePlugin.error('请填写标签名');
  }
  let types = parmas.name.trim();
  if (!types) {
    MessagePlugin.error('请填写标签名');
    return;
  }
  tagSave(parmas).then((res) => {
    if (res.data === 0) {
      MessagePlugin.error('已存在相同标签');
    }
    if (res.data && res.data !== 0 && res.statusCode === 200) {
      MessagePlugin.success('添加成功');
      parmas.name = '';
      init();
    }
  });
};
const cancel = () => {};
const confirm = () => {
  addTag();
};
const remove = (node) => {
  //删除节点
  DelId.value = node.data.id;
  visible1.value = true;
  // tree.value.remove(node.data.value);
};

const onActive = (value, content) => {
  //激活状态
  actived.value = [content.node.data.id];
};
const handleDragStart = ({ node, e }) => {
  // console.log('handleDragStart', node.value, e);
};
const handleDragEnd = ({ node, e }) => {
  // console.log('handleDragEnd', node.value, e);
};
const handleDragOver = () => {};
const handleDragLeave = ({ node, e }) => {
  // console.log('handleDragLeave', node.value, e);
};
const handleDrop = ({ node, dropPosition, e }) => {
  // console.log('handleDrop', node.value, dropPosition, e);
};
const visible1 = ref(false);
const submitClick = async () => {
  try {
    visible1.value = false;
    let res = await delTag(route.query.projectId, DelId.value);
    if (res.succeeded && res.statusCode === 200) {
      tree.value.remove(DelId.value);
    }
  } catch {}
  //点击删除
};
const closeClick = () => {
  visible1.value = false;
};
</script>

<style lang="less" scoped>
.setting-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.message-box {
  display: flex;
  padding: 16px 24px;
  width: 100%;
  background: #f5f5f5;
  border-radius: 6px;
  margin-bottom: 16px;
}
.tree-parent {
  flex: 1;

  width: 580px;
  overflow: auto;
}
.tree-parent::-webkit-scrollbar {
  display: none;
}
.doorIcon {
  cursor: pointer;
  font-size: 24px;
  color: #e62b17;
  margin-right: 8px;
}
.message-content {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}
.message-un {
  cursor: pointer;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e62b17;
  line-height: 24px;
  text-decoration: underline;
  margin-left: 8px;
}
:deep(.t-tree__item--open) {
  background: #f5f5f5;
}
:deep(.t-tree__item:hover) {
  background: #f0f0f0;
}
:deep(.t-is-active .t-tree__label) {
  background: transparent;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}
:deep(.t-tree__item) {
  height: 36px;
}
:deep(.t-tree__icon) {
  margin-left: 20px;
  .doorIcon {
    transition: all 0.3s;
    font-size: 16px;
    color: RGBA(158, 158, 158, 1);
    transform: rotate(-90deg);
  }
}
:deep(.t-tree__item--open) {
  .t-tree__icon {
    .doorIcon {
      transform: rotate(0deg);
    }
  }
}

// :deep(.t-tree__operations) {
//   opacity: 0;
// }

.editMenu {
  display: flex;
  padding-right: 8px;
  .doorIcon {
    font-size: 16px;
    margin-left: 20px;
    color: rgba(153, 153, 153, 1);
  }
}
#three-id-001 {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
</style>
